<template>
  <Card title="统计" v-bind="$attrs">
<!--    <template #extra>-->
<!--      <a-button type="link" size="small">更多</a-button>-->
<!--    </template>-->

    <CardGrid class="!md:w-1/3 !w-full">
      <span class="flex">
        <Icon icon="ant-design:dollar-outlined" color="#77a9f5" :size="iconSize" />
        <span class="text-lg ml-6">
          <div style="width: 100%;">账户余额</div>
          <div style="margin-top: 15px;"><CountTo prefix="$" :startVal="0" :endVal="statisticsInfo.accountBalance" :decimals="2" :class="countToClass" /></div>
        </span>
      </span>
    </CardGrid>
    <CardGrid class="!md:w-1/3 !w-full">
      <span class="flex">
        <Icon icon="ant-design:pay-circle-outlined" color="#3fb27f" :size="iconSize" />
        <span class="text-lg ml-6">
          <div style="width: 100%;">充值金额</div>
          <div style="margin-top: 15px;"><CountTo prefix="$" :startVal="0" :endVal="statisticsInfo.rechargeAmount" :decimals="2" :class="countToClass" /></div>
        </span>
      </span>
    </CardGrid>
    <CardGrid class="!md:w-1/3 !w-full">
      <span class="flex">
        <Icon icon="ant-design:pound-outlined" color="#e18525" :size="iconSize" />
        <span class="text-lg ml-6">
          <div style="width: 100%;">服务费</div>
          <div style="margin-top: 15px;"><CountTo prefix="$" :startVal="0" :endVal="statisticsInfo.serviceFee" :decimals="2" :class="countToClass" /></div>
        </span>
      </span>
    </CardGrid>
    <CardGrid class="!md:w-1/3 !w-full">
      <span class="flex">
        <Icon icon="ant-design:transaction-outlined" color="#bf0c2c" :size="iconSize" />
        <span class="text-lg ml-6">
          <div style="width: 100%;">下发金额</div>
          <div style="margin-top: 15px;"><CountTo prefix="$" :startVal="0" :endVal="statisticsInfo.withdrawalAmount" :decimals="2" :class="countToClass" /></div>
        </span>
      </span>
    </CardGrid>
    <CardGrid class="!md:w-1/3 !w-full">
      <span class="flex">
        <Icon icon="ant-design:property-safety-outlined" color="#00d8ff" :size="iconSize" />
        <span class="text-lg ml-6">
          <div style="width: 100%;">退款金额</div>
          <div style="margin-top: 15px;"><CountTo prefix="$" :startVal="0" :endVal="statisticsInfo.drawbackAmount" :decimals="2" :class="countToClass" /></div>
        </span>
      </span>
    </CardGrid>
    <CardGrid class="!md:w-1/3 !w-full">
      <span class="flex">
        <Icon icon="ant-design:pound-outlined" color="#4daf1bc9" :size="iconSize" />
        <span class="text-lg ml-3">
          <div style="width: 100%;">退款服务费</div>
          <div style="margin-top: 15px;"><CountTo prefix="$" :startVal="0" :endVal="statisticsInfo.drawbackServiceCharge" :decimals="2" :class="countToClass" /></div>
        </span>
      </span>
    </CardGrid>
  </Card>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { Card } from "ant-design-vue";
import { Icon } from "/@/components/Icon";
import { CountTo } from "/@/components/CountTo/index";
import { useEventListener } from "/@/hooks/event/useEventListener";
import { tryOnUnmounted, useDebounceFn } from "@vueuse/core";

  const CardGrid = Card.Grid;
  const iconSize = ref(60);
  const countToClass = ref('text-2xl');
  const statisticsInfo = ref<any>({});

  const props = defineProps({
    statisticsData: { type: Object, default: ()=>{} },
  });

  watch(
    () => props.statisticsData,
    (newVal, oldVal) => {
      statisticsInfo.value = newVal;
    }
  );

  // 监听 resize 事件
  const { removeEvent } = useEventListener({
    el: window,
    name: 'resize',
    listener: useDebounceFn(() => calcWidth(window.innerWidth), 50),
  });

  // 卸载组件时取消监听事件
  tryOnUnmounted(() => removeEvent());

  /**
   * 计算宽度
   * @param width
   */
  function calcWidth(width){
      if(width >= 1900){
        iconSize.value = 70;
        countToClass.value = 'text-2xl';
      }else if(width >= 1600){
        countToClass.value = 'text-1xl';
        iconSize.value = 60;
      }else if(width >= 1300){
        countToClass.value = 'text-xl';
        iconSize.value = 50;
      }else {
        countToClass.value = '';
        iconSize.value = 40;
      }
  }

</script>
